<template>
  <div class="home">    
    <AddTodo v-on:add-todo="addTodo" />
    <Todos :todos="todos" v-on:del-todo="deleteTodo" />
  </div>
</template>

<script>

import AddTodo from "@/components/AddTodo.vue";
import Todos from "@/components/Todos.vue";
import axios from "axios";

export default {
  name: "Home",
  components: {
    Todos,    
    AddTodo,
  },
  data() {
    return {
      //bigTitle: "Falcon Todo List",
      todos: [
        // { id: 1, title: "todo one", completed: false },
        // { id: 2, title: "todo two", completed: false },
        // { id: 3, title: "todo three", completed: true },
      ],
    };
  },
  methods: {
    deleteTodo(id) {
      axios
        .delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
        .then(
          () => (this.todos = this.todos.filter((todo) => todo.id !== id))
        )
        .catch((err) => console.log(err));
    },
    addTodo(newTodo) {
      const { title, completed } = newTodo;
      
      axios
        .post("https://jsonplaceholder.typicode.com/todos", {
          title,
          completed,
        })
        .then((res) => (this.todos = [...this.todos, res.data]))
        .catch((err) => console.log(err));

      //this.todos.push(newTodo)
    },
  },

  created() {
    axios
      .get("https://jsonplaceholder.typicode.com/todos?_limit=5")
      .then((res) => (this.todos = res.data))
      .catch((err) => console.log(err));
  },
};
</script>


